<template>
	<view>
		
		<u-navbar :immersive="false" :is-back="true" back-icon-color="#fff" title-color="#fff" :background="navbackground" :border-bottom="false">
			<view class="my_member_title">
				<u-tabs :list="tabsRlist" height="64" font-size="34" :is-scroll="false" bg-color="" active-color="#fff" inactive-color="#FFE8D6" :current="tabsrcurrent" @change="tabschange"></u-tabs>
			</view>
		</u-navbar>
		

		<view class="content_box22">
			<!--排行榜-->
			<rankingList ref="rankinfo"></rankingList>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				navbackground: {
					backgroundImage: 'linear-gradient(180deg, transparent, transparent)'
				},
				
				tabsRlist: [{
					name: '收益榜'
				}, {
					name: '好友榜'
				}],
				tabsrcurrent: 0,
				
			}
		},
		//页面滚动监听事件
		onPageScroll(e) {
			let that = this
			if (e.scrollTop >= 1) {
				this.title = '邀请排行榜'
				that.navbackground.backgroundImage = 'linear-gradient(180deg, #ffffff, #ffffff)'
			} else {
				that.Navtitle = ''
				this.title = ''
				that.navbackground.backgroundImage = 'linear-gradient(180deg, transparent, transparent)'
			}
		},
		methods: {
			tabschange(e){
				this.tabsrcurrent = e
				if(e == 0){
					this.$refs.rankinfo.tabschange(0)
				} else {
					this.$refs.rankinfo.tabschange(1)
				}
			},
		}
	}
</script>

<style lang="scss">
	.content_box22 {

		width: 95%;

		/* #ifdef APP-PLUS */
		margin: 30rpx auto 0;
		/* #endif */

		/* #ifdef MP-WEIXIN */
		margin: 30rpx auto 0;
		/* #endif */

		/* #ifdef H5 */
		margin: 20rpx auto 0;
		/* #endif */
		position: relative;
		//box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04), 0 -4px 12px rgba(0, 0, 0, 0.04);
	}
	.my_member_title {
		width: 60%;
		margin: 0 auto;
		align-items: center;
		justify-content: center;
	}
</style>